import {messages} from "share/common";
import React from 'react'
import menuRoute from 'routes/menuRoute'
import { connect } from 'react-redux'
import {Steps, Card, Row, Col, Button, Popover, Spin} from 'antd';
const Step = Steps.Step;
import nodata from "images/senior-service-open/no-data-computer.png"
import 'styles/senior-service-open/service-list.scss'
import seniorService from 'containers/increment-service/senior-service-open/senior-service.service'

class ServiceList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      list: [],
      orderConfirm: menuRoute.getRouteItem('order-confirm'), //确认订单
    }
  }

  componentDidMount() {
    this.getList()
  }

  getList = () => {
    let params = {
      tenantId: this.props.tenant.id,
      serviceTypeCode: 'CHECK_INVOICE'
    };
    this.setState({ loading: true });
    seniorService.getServiceList(params).then(res => {
      this.setState({
        loading: false,
        list: res.data
      })
    }).catch(err => {
      this.setState({ loading: false });
    })
  };

  //立即购买
  handleBuy = (item) => {
    this.context.router.push(this.state.orderConfirm.url.replace(':id', item.id))
  };

  test = (item) => {
    return (
        <div dangerouslySetInnerHTML={{__html: item.replace("↵", "<br/>")}}/>
    );
};

  render(){
    const { loading, list } = this.state;
    return (
      <div className="service-list">
        <Steps current={0} size="small">
          <Step title={messages('senior-service-open.key2')/*选择服务*/} />
          <Step title={messages('senior-service-open.key3')/*确认订单*/} />
          <Step title={messages('senior-service-open.key4')/*付款*/} />
          <Step title={messages('senior-service-open.key5')/*申请开票*/} />
          <Step title={messages('senior-service-open.key6')/*开通设置*/} />
        </Steps>
        <Card title={messages('senior-service-open.key89')/*请选择您需要的服务*/} bordered={false} className="intros-container">
          {
             list.length ?
               list.map((type) => {
                 return (
                   <div>
                     <div className={'list-title'}>{type.name}</div>
                     <div className={'list-cards'}>
                       <Row>
                         {
                           type.services && type.services.length ? type.services.map((item, index) => {
                             return (
                               <Col span={8}>
                                 <Card className="intro-card"
                                       loading={loading}
                                       key={item.id}
                                       style={{maxWidth: 450, marginRight: 20,}}
                                       bodyStyle={{height: 220, padding: 24}}
                                       actions={
                                         [ <div className="price">
                                           <Popover placement="topLeft"
                                                    overlayStyle={{maxWidth: 500}}
                                                    content={
                                                      <div>
                                                        <span>{item.price}</span>{messages('senior-service-open.key41')/*元*/}
                                                        {item.countUnitName ? `/${item.countUnitName}` : ''}
                                                        {item.timeUnitName ? `/${item.timeUnitName}` : ''}
                                                      </div>}>
                                             <span>{item.price}</span>{messages('senior-service-open.key41')/*元*/}
                                             {item.countUnitName ? `/${item.countUnitName}` : ''}
                                             {item.timeUnitName ? `/${item.timeUnitName}` : ''}
                                           </Popover>
                                         </div>,
                                           <div className={'buttons'}>
                                             <Button type="primary" onClick={() => this.handleBuy(item)}>{messages('senior-service-open.key90')/*立即购买*/}</Button>
                                           </div>
                                         ]
                                       }>
                                   <div className="intro-title">
                                     <Popover placement="topLeft"
                                              overlayStyle={{maxWidth: 500}}
                                              content={<div>{item.upperLimit && `【${messages('senior-service-open.key91',{arg1:item.upperLimit})/*上限 {arg1}张*/}】`}{item.name}</div>}>
                                       <h2>{item.upperLimit && `【${messages('senior-service-open.key91',{arg1:item.upperLimit})/*上限 {arg1}张*/}】`}{item.name}</h2>
                                     </Popover>
                                   </div>
                                   <div className="intro-content">
                                     <Popover placement="topLeft"
                                              overlayStyle={{maxWidth: 500}}
                                              content={<div dangerouslySetInnerHTML={{__html: item.intro.replace(/(\r\n|\n|\r)/gm, "<br/>")}}/>}>
                                       <div dangerouslySetInnerHTML={{__html: item.intro.replace(/(\r\n|\n|\r)/gm, "<br/>")}}/>
                                     </Popover>
                                   </div>
                                 </Card>
                               </Col>
                             )
                           }) : null
                         }
                       </Row>
                     </div>
                   </div>
                 )
                 }
               )
              :
              <div className={'no-data'}>
                <Spin spinning={loading}>
                <div style={{margin: "60px 0 20px"}}><img src={nodata} style={{height: 300, width: 300}}/></div>
                <div>{messages('senior-service-open.key92')/*无法获取服务信息，请联系汇联易客服！电话：400-829-7878 邮箱：service@huilianyi.com*/}</div>
                </Spin>
              </div>
          }
        </Card>
      </div>
    )
  }

}

ServiceList.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    tenant: state.login.tenant,
  }
}

export default connect(mapStateToProps)(ServiceList);
